<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['vote:myvote:add']"
        >新增投票</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="subjectList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主题编号" prop="subjectId" width="120" />
      <el-table-column label="主题名称" prop="description" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="主题状态" prop="status" :formatter="voteStatusFormat" width="100"/>
      <el-table-column label="发起时间" align="center" prop="startTime" width="180" >
        <template slot-scope="scope">
          <span>{{ scope.row.startTime | dateTimeFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="截止时间" align="center" prop="cutOffTime" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.cutOffTime | dateTimeFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否匿名" :formatter="yesNoFormat" prop="anonymous" width="200" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">

          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="vote(scope.row)"
          >投票</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="giveUp(scope.row)"
            v-if="!scope.row.required"
          >弃票</el-button>
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-circle-check"-->
<!--            @click="handleCutOff(scope.row)"-->
<!--            v-if="scope.row.status === '4'"-->
<!--          >查看结果</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--          >删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
  import {getPendingVote} from '@/api/vote/vote'

  export default {
    name: "index",
    created() {
      this.getList();
    },
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderByColumn: 'status',
          isAsc: 'asc',
        },
      }

    },
    methods: {
      vote(row) {

      },
      giveUp(row) {

      },
      getList() {
        this.loading = true;
        getPendingVote(this.queryParams).then(response => {
          this.subjectList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
    }
  }
</script>

<style scoped>

</style>
